<template>
  <view class="order-form-update">
    <view class="u-address" @tap="selectAddress">
      <view class="a-empty" v-if="memberAddressList.length === 0">
        <text class="iconfont icon">&#xe6de;</text>
        添加收货地址
      </view>
      <template v-else>
        <view class="a-link">
          <text>{{ form.recipient }}</text>
          <text>{{ form.mobile }}</text>
        </view>
        <view class="a-address">
          <view>{{ form.provinceName }}{{ form.cityName }}{{ form.districtName }}{{ form.fullAddress }}</view>
          <view class="iconfont">&#xe628;</view>
        </view>
      </template>
    </view>
    <view class="u-card">
      <view class="c-header">{{ getObjVal(orderFormInfo,'orderFormGoodsItemsList[0].goodsItems.goods.goodsCategory.name')  }}</view>
      <view class="c-content">
        <view class="c-left">
          <lif-img-loader/>
        </view>
        <view class="c-right">
          <view class="r-name">{{ getObjVal(orderFormInfo,'orderFormGoodsItemsList[0].goodsItems.goods.title') }}</view>
          <view class="r-des">
            <view>{{ getObjVal(orderFormInfo,'orderFormGoodsItemsList[0].goodsItems.goods.description') }}</view>
            <view>x{{ getObjVal(orderFormInfo,'orderFormGoodsItemsList[0].quantity',0) }}</view>
          </view>
          <view class="r-spec">
            <view>规格：黑色/70A</view>
            <view>￥{{ getObjVal(orderFormInfo,'orderFormGoodsItemsList[0].goodsItems.goods.amountCost') }}</view>
          </view>
        </view>
      </view>
      <view class="c-footer">
        <text>共{{ getObjVal(orderFormInfo,'orderFormGoodsItemsList[0].quantity',0) }}件商品</text>
        <text>订单金额</text>
        <text>￥{{ getObjVal(orderFormInfo,'amount',0) }}</text>
      </view>
    </view>
    <view class="u-footer">
      <button class="f-btn" @tap="popup.pay.attr.show = true">提交订单</button>
    </view>
    <u-popup :show="popup.address.attr.show" :round="10" :safeAreaInsetBottom="true" closeable @close="popup.address.attr.show = false">
      <view class="popup-main">
        <view class="m-title">我的收货地址</view>
        <view class="m-card-list">
        </view>
        <view class="m-footer">
          <view class="f-btn">添加收货地址</view>
        </view>
      </view>
    </u-popup>
    <u-popup :show="popup.pay.attr.show" :round="10" :safeAreaInsetBottom="true" closeable @close="popup.pay.fn.cancel">
      <view class="popup-main">
        <view class="m-title">确认兑换</view>
        <view class="m-info">
          <view class="i-amount">订单金额(￥{{ getObjVal(orderFormInfo,'amount',0) }})</view>
          <view class="i-integral">兑换所需礼品卡x{{ getObjVal(orderFormInfo,'integral',0) }}</view>
          <view class="i-time">
            兑换剩余时间：29:59
          </view>
        </view>
        <view class="m-card-list">
          <view class="l-item">
            <image :src="'background/card.png' | prefixOssUrl" />
            <view class="i-id">礼品卡号：12123123</view>
            <view class="i-time">有效期：2022-06-06 15:25:52</view>
          </view>
          <view class="l-item">
            <image :src="'background/card.png' | prefixOssUrl" />
            <view class="i-id">礼品卡号：12123123</view>
            <view class="i-time">有效期：2022-06-06 15:25:52</view>
          </view>
          <view class="l-add">
            <text class="iconfont">&#xe6de;</text>
            <text>扫码添加绑定</text>
          </view>
        </view>
        <view class="m-footer">
          <view class="f-btn">确认兑换(剩余2张)</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { model } from "@/model";
const { OrderForm } = model.collection;
export default {
  components: {},
  data () {
    return {
      form:{
        recipient:'',
        mobile:'',
        provinceName:'',
        provinceId:0,
        districtName:'',
        districtId:0,
        cityName:'',
        cityId:'',
        fullAddress:''
      },
      orderFormInfo:{},
      popup: {
        address: {
          attr: {
            show: false
          }
        },
        pay: {
          attr: {
            show: false
          },
          fn: {
            cancel: () => {
              this.showModal('确认放弃兑换？', '', '确认', () => {
                this.popup.pay.attr.show = false;
                this.nav('/subpackage/order-form/pages/list/index?index=1');
              })
            }
          }
        }
      }
    };
  },
  onLoad (params) {
    this.getOrderFormInfo(params.id);
  },
  created () { 
    if(this.memberAddressList.length) {
      let address = this.memberAddressList.find(i=>i.isDefault === 1) ?  
      this.memberAddressList.find(i=>i.isDefault === 1)  : this.memberAddressList[0];
      this.form.recipient = address.recipient;
      this.form.mobile = address.mobile;
      this.form.provinceName = address.provinceName;
      this.form.provinceId = address.provinceId;
      this.form.cityName = address.cityName;
      this.form.cityId = address.cityId;
      this.form.districtName = address.districtName;
      this.form.districtId = address.districtId;
      this.form.fullAddress = address.fullAddress;
    }
  },
  mounted () { },
  methods: {
    selectAddress() {
      if(this.memberAddressList.length === 0) {
        this.popup.address.attr.show = true;
      }else {
        this.nav('/subpackage/user/pages/address/add');
      }
    },
    getOrderFormInfo (id) {
      OrderForm.sendApi("formInfo", {
        params: {id},
        data: {},
      }).then((res) => {
        const { status, data } = res || {};
        if (status) {
          this.orderFormInfo = data;
        } else {
          this.toast('订单信息获取失败');
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
.order-form-update {
  .layout_flex(@d:column);
  height: 100vh;
  background: #eee;

  .u-address {
    position: relative;
    width: 630rpx;
    height: 120rpx;
    padding: 30rpx;
    margin: 30rpx 0;
    background: #fff;
    border-radius: 10rpx;
    &::after {
      position: absolute;
      left: 0;
      bottom: 0;
      content: "";
      width: 690rpx;
      height: 6rpx;
      background: repeating-linear-gradient(
        -45deg,
        transparent,
        #f07a96,
        transparent,
        #008ec7,
        transparent,
        #f8bd9d,
        transparent 80rpx
      );
    }
    .a-empty {
      .layout_flex(@j:center);
      width: 100%;
      height: 100%;
      .icon {
        margin-top: 5rpx;
        margin-right: 10rpx;
        font-size: 38rpx;
      }
    }
    .a-link {
      text {
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
        &:nth-child(1) {
          margin-right: 20rpx;
        }
      }
    }
    .a-address {
      .layout_flex();
      margin-top: 20rpx;
      view {
        &:nth-child(1) {
          width: 600rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        &:nth-child(2) {
        }
      }
    }
  }
  .u-card {
    width: 630rpx;
    padding: 0 30rpx;
    background: #fff;
    border-radius: 10rpx;
    .c-header {
      height: 90rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: #333;
      line-height: 90rpx;
      border-bottom: 1rpx solid #e8e8e8;
    }
    .c-content {
      width: 630rpx;
      margin: 20rpx 0;
      .layout_flex();
      .c-left {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        border-radius: 10rpx;
      }
      .c-right {
        flex: 1;
        .r-name {
          width: 450rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 30rpx;
          font-weight: 500;
          color: #333;
        }
        .r-des {
          .layout_flex(@j:space-between);
          view {
            margin: 6rpx 0;
            font-size: 24rpx;
            font-weight: 500;
            color: #999;
            &:nth-child(1) {
              width: 400rpx;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }
        }
        .r-spec {
          .layout_flex(@j:space-between);
          view {
            margin: 10rpx 0;
            font-size: 24rpx;
            font-weight: 500;
            color: #999;
            &:nth-child(1) {
              font-size: 20rpx;
              font-weight: 500;
              color: #666;
            }
            &:nth-child(2) {
              font-size: 24rpx;
              font-weight: 500;
              color: #ff0000;
            }
          }
        }
      }
    }
    .c-footer {
      height: 90rpx;
      .layout_flex(@j:flex-end);
      text {
        &:nth-child(1) {
          margin-right: 20rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #999;
        }
        &:nth-child(2) {
          font-size: 32rpx;
          font-weight: 500;
          color: #333;
        }
        &:nth-child(3) {
          font-size: 32rpx;
          color: #ff0000;
        }
      }
    }
  }
  .u-footer {
    position: fixed;
    bottom: 0;
    .layout_flex();
    width: 750rpx;
    height: 150rpx;
    background: #fff;
    box-shadow: 0rpx -2rpx 3rpx 0rpx rgba(24, 24, 24, 0.05);
    .f-btn {
      width: 690rpx;
      height: 90rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      line-height: 90rpx;
      background: linear-gradient(-90deg, #ff3531, #ff7103);
      border-radius: 45rpx;
    }
  }
  .popup-main {
    .layout_flex(@d:column);
    height: 90vh;

    .m-title {
      height: 90rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      text-align: center;
      line-height: 90rpx;
    }
    .m-info {
      .layout_flex(@j:center,@d:column);
      width: 100%;
      height: 180rpx;
      background: #f8f8f8;
      .i-amount {
        font-size: 24rpx;
        font-weight: 500;
        color: #666;
      }
      .i-integral {
        margin: 10rpx 0;
        font-size: 30rpx;
        font-weight: bold;
        color: #ff0000;
      }
      .i-time {
        font-size: 24rpx;
        font-weight: 500;
      }
    }
    .m-card-list {
      flex: 1;
      width: 100%;
      overflow-y: auto;
      .l-item {
        position: relative;
        width: 690rpx;
        height: 148rpx;
        margin: 20rpx auto;
        image {
          position: absolute;
          top: 0;
          left: 0;
          width: 690rpx;
          height: 148rpx;
          z-index: 9;
        }
        .i-id,
        .i-time {
          position: absolute;
          left: 290rpx;
          font-size: 24rpx;
          color: #887667;
          z-index: 99;
        }
        .i-id {
          top: 40rpx;
        }
        .i-time {
          top: 75rpx;
        }
      }
      .l-add {
        .layout_flex(@j:center);
        width: 690rpx;
        height: 146rpx;
        margin: 20rpx auto;
        font-size: 30rpx;
        font-weight: 500;
        color: #999;
        border: 1rpx dashed #999;
        border-radius: 10rpx;
      }
    }
    .m-footer {
      .layout_flex(@j:center);
      width: 100%;
      height: 150rpx;
      background: #fff;
      box-shadow: 0rpx -3rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
      z-index: 999;
      .f-btn {
        .layout_flex(@j:center);
        width: 690rpx;
        height: 90rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #fff;
        background: linear-gradient(-90deg, #ff7103, #ff3531);
        border-radius: 45rpx;
      }
    }
  }
}
</style>
